import { createElement, render, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import { mgop } from '@aligov/jssdk-mgop';
import { Button , Box} from '@alifd/next';
function Hello() {

    
    const [res,setRes] = useState('');
    const [name,setName] = useState('');
    const [phoneNumber,setPhoneNumber] = useState('');

     //初始化jsbridge
     const excuteBridge = () => {
    
        ZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
        })
      }

    //复制内容到剪贴板
    const doCopy = (param) => {
        excuteBridge();
        ZWJSBridge.setClipboardData({ 
            text: param
        }).then((result) =>{
            console.log('#### ZWJSBridge.setClipboardData() log.result:   ' + result);
            alert("成功复制到剪贴板! " + param);
        }).catch(error => { 
            console.log('#### ZWJSBridge.setClipboardData() error.error:  ' + error);
            alert("复制内容到剪贴板失败");
        });
        console.log('**** exit doCopy() ****');
    }


    const RPCApiTest = () => {
        mgop({ 
                api: 'mgop.alibaba.mianhua.test', // 必须  
                host: 'https://mapi.zjzwfw.gov.cn/',  
                dataType: 'JSON',  
                type: 'POST', 
                data : {
                    "configname": "train"
                },
                appKey: 'tcv4roui+2001601010+tnwjkz', // 必须  
        onSuccess: data => {   
            setRes(JSON.stringify(data));
            console.log("mgop run success. data :  " + JSON.stringify(data)); 
        },  
        onFail: err => {     
            
            console.log("mgop run error. error :  " + JSON.stringify(err)); 
            
           alert("获取用户信息失败： " + JSON.stringify(err));
            
        }})
    }


  return (
    <View>
        <div id="hello">
            <h1 style={{textAlign:'center',color:'white'}}>Hello测试</h1>
                <div>   
                <button onClick={() => RPCApiTest()}
                            style={{
                                width: 200,
                                height: 40,
                                backgroundColor: '#d0c27d',
                                color: 'white',
                                fontSize: 'small',
                                alignSelf:'center'
                            }} 
                  >hello</button>
                  <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                  <div>
                                <Text style={{
                                        fontSize: 20,
                                        color:'black'
                                    }}
                            >result:</Text> 
                        
                        <Text style={{
                                        fontSize: 15,
                                        color:'blue',
                                        textAlign:'center'
                                    }}
                            >{res}</Text>
                  </div>

                </div>

        </div>
    </View>
  );
}

export default Hello;
